<template>
  <div class="all" ref="xuan">
      <el-container>
    <!-- <el-header style="height:140px;"> -->
           
    <!-- </el-header> -->
    <el-main>
       <div class="all_center" ref="all_center">
            <div class="option">
           
            <div class="text">
                <div>
                    <p>
                        请选择游戏（一级）
                    </p>
                    <li v-for="(item,index) in list" :key="index"
                    @click="clickCasc(index,item.name)"
                    :class="nowindex===index?'active':''"
                    >
                        {{item.name}}
                    </li>
                </div>
                <i class="el-icon-right" ref="listTwo1"></i>
                <div ref="listTwo">
                     <p>
                        请选择游戏类型（二级）
                    </p>
                    <li v-for="(item,index) in listTwo.leixing" :key="index"
                     @click="clickTwo(item,index)"
                      :class="nowindex1===index?'active1':''"
                    >
                        {{item}}
                    </li>
                </div>
                <i class="el-icon-right" ref="listTwo2"></i>
                <div ref="listTwo">
                      <p>
                        请选择大区（二级）
                    </p>
                    <li v-for="(item,index) in listThree.qu" :key="index"
                   @click="clickTwo1(item.name,index)"
                    :class="nowindex2===index?'active2':''"
                    >
                        {{item.name}}
                    </li>
                </div>
                <i class="el-icon-right" ref="listThree1"></i>
                <div ref="listThree" 
                >
                  <p>
                        请选择服务器（三级）
                    </p>
                    <li v-for="(item,index) in listFour" :key="index"
                   @click="clickTwo2(item,index)"
                    :class="nowindex3===index?'active3':''"
                    >       
                        {{item}}
                    </li>
                </div>
            </div>
         
         </div>
       </div>   
    </el-main>
    <el-footer style="margin-left:4.5%;">
        <p>您当前选择的是:
            <span class="jilian">{{game}}-{{leixing}}-{{qu}}</span>
        </p>
         <div class="footer">
               <div ref="xia">
                <el-button 
                plain
            style="margin-top: 12px;color:white;background:#55CA7D;"
             @click="next">
                下一步，填写通用信息

            </el-button>
           </div>
           
          </div>
    </el-footer>
  </el-container>
       </div>
       
</template>

<script>
import commodityform from './commodity_form'
export default {
    components:{
  commodityform
},
data:()=>{
    return {
         fl:false,
     f:true,
       list:[],
       listTwo:[],//类型
       listThree:[],//大区
       listFour:[],//服务器
          active:0,
      
         yin:'↑',
        id:1,
       flag:true,
       nowindex:0,
       nowindex1:0,
       nowindex2:0,
        nowindex3:0,
    //    游戏类型大区
       game:'',leixing:'',qu:'',
      
    }
},
methods:{
clickYin(){
    this.f=!this.f
    
  },
    // 下一步
next() {
        if (this.active++ > 2) this.active = 0;
        console.log(this.active)
       
        if(this.game==="" && this.leixing==="" && this.qu===""){
            this.$notify.error({
          title: '错误',
          message: '请选择完整信息'
        });
        }else{
            this.$refs.xuan.style.display="none";
            this.$refs.ruleForm1.style.display="block"
            let obj={
                game:this.game,
                leixing:this.leixing,
                qu:this.qu
            }
            localStorage.setItem('game',JSON.stringify(obj))
            
            
        }
    
        },
    
    //   一级筛选
      clickCasc(index,name){
          this.nowindex=index;
          this.listTwo=this.list[index]
        this.listThree=this.list[index]
          console.log( this.listTwo)
          this.game=name
      },
      clickTwo(item,index){
          this.leixing=item
          this.nowindex1=index
      },
       clickTwo1(name,index){
           this.qu=name
           this.nowindex2=index
           console.log(this.listThree.qu[index],'333')
           this.listFour=this.listThree.qu[index].fuwu
       },
        clickTwo2(item,index){
        
          this.nowindex3=index
      },
},
mounted(){
      this.list=this.$store.getters.list
}
}
</script>

<style>

</style>